<template>
  <div class="btn">
    <div id="main" style="width: 100%;height:80vh;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      option: {
        title: {
          text: "二级分类数量"
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [],
            type: "line"
          }
        ]
      }
    };
  },
  computed: {
    ...mapGetters({
      catelist: "cate/catelist"
    })
  },
  methods: {
    ...mapActions({
      reqcatelist: "cate/catelist"
    })
  },
  watch: {
    catelist: {
      handler() {
        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        var option = this.option;
        option.xAxis.data=this.catelist.map(item=>item.catename)
        // console.log(this.catelist.map(item=>item.children.length));
        
        option.series[0].data=this.catelist.map(item=>item.children?item.children.length*3:0)
        // console.log(option.series);
        
        option && myChart.setOption(option);
      },
      deep: true
    }
  },
  mounted() {
    this.reqcatelist();
    // 基于准备好的dom，初始化echarts实例
  }
};
</script>

<style>
</style>
